<!--
* description: 善意索赔维护
* author:wangjuan
* createdDate:2020-12-4
-->
<template>
  <section class="editBigAreaInfo">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="善意索赔申请"
      :append-to-body="true"
      :visible.sync="curPopupsVisible"
      width="70%"
      @close="closeEdit"
      @opened="open"
    >
      <dialogHeader
        slot="title"
        title="善意索赔申请"
        :style-type="$store.state.app.dialogType"
      />
      <div class="filter-container filter-title">基本信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList" :gutter="26">
          <one-table-template
            ref="multipleTable"
            :dynamic-components="tableComponents"
            :dynamic-api-config="apiConfig"
            :dynamic-form-fields="formField"
            :dynamic-is-show-select="true"
            :dynamic-is-show-more-btn="true"
            :dynamic-is-init-table="true"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">客户车辆信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList" :gutter="26">
          <one-table-template
            ref="multipleTable1"
            :dynamic-components="tableComponents1"
            :dynamic-form-fields="formField1"
            :dynamic-is-show-select="true"
            :dynamic-is-show-more-btn="true"
            :dynamic-is-init-table="true"
          />
        </el-row>
      </div>

      <div class="filter-container filter-title">补偿信息</div>
      <div class="filter-container filter-params">
        <el-row ref="vailComponentList" :gutter="26">
          <one-table-template
            ref="multipleTable2"
            :dynamic-components="tableComponents2"
            :dynamic-form-fields="formField2"
            :dynamic-buttons="tableButtons"
            :dynamic-is-show-select="true"
            :dynamic-is-show-more-btn="true"
            :dynamic-is-init-table="true"
          />
        </el-row>
      </div>

      <div slot="footer" class="dialog-footer">
        <!-- <el-button
          v-for="comp in tableButtons"
          :key="comp.compKey"
          :type="comp.type"
          :icon="comp.icon"
          @click="comp.clickEvent"
          >{{ comp.text }}</el-button
        > -->
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { formMixins } from "@/components/mixins/formMixins";
import OneTableTemplate from "@/components/templates/oneTable";
import { vehiclePdiPriceInquirys } from "@/api/se/vehiclePdiPriceInquiry";
import request from "@/utils/request";

export default {
  components: {
    dialogHeader: () => import("@/components/dialogHeader"),
    mixButton: () => import("@/components/basicComponent/mixButton"),
    OneTableTemplate
  },

  // 组件混入对象
  mixins: [formMixins],

  props: {
    popupsVisible: { type: Boolean, default: false }
  },

  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path;

    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode]);
    return {
      //   动态组件-按钮
      tableButtons: [
        {
          compKey: "btnKey1",
          type: "primary",
          size: "small",
          icon: "iconfont  icon-preservation",
          clickEvent: () => this.save(),
          text: "提交" /* 保存*/,
          position: "right"
        }
      ],
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
          : [
              {
                compKey: "compKey1",
                labelName: "申请单号：",
                codeField: "complainCode",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                disabled: true
              },
              {
                compKey: "compKey3",
                labelName: "门店名称：",
                codeField: "dlrName",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                disabled: true
              },
              {
                compKey: "compKey2",
                labelName: "门店编码：",
                codeField: "dlrCode",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                disabled: true
              },
              {
                compKey: "compKey4",
                labelName: "关联CC投诉单编号：",
                codeField: "orderCode",
                component: () => import("@/components/ve/multipleSearchInput"),
                type: "inputText",
                isMust: true,
                dataToObject: {
                  // 控制弹窗页面 搜索 网格 元素
                  oFields: "supplierId,supplierShortName",
                  tableComponents: [
                    {
                      compKey: "compKey1",
                      labelName: "客户姓名：",
                      codeField: "custName",
                      component: () => import("@/components/org/commonInput"),
                      type: "inputText",
                      isMust: true,
                      span: 8
                    },
                    {
                      compKey: "compKey2",
                      labelName: "客户电话：",
                      codeField: "phone",
                      component: () => import("@/components/org/commonInput"),
                      type: "inputText",
                      isMust: true,
                      span: 8
                    },
                    {
                      compKey: "compKey2",
                      labelName: "车牌号：",
                      codeField: "carLicense",
                      component: () => import("@/components/org/commonInput"),
                      type: "inputText",
                      isMust: true,
                      span: 8
                    }
                  ],
                  tableCols: [
                    {
                      prop: "custName",
                      label: "客户姓名"
                    },
                    {
                      prop: "phone",
                      label: "客户电话"
                    },
                    {
                      prop: "carLicense",
                      label: "车牌号"
                    },
                    {
                      prop: "orderCode",
                      label: "投诉单号"
                    }
                  ],
                  formField: {
                    custName: "",
                    phone: "",
                    carLicense: ""
                  },
                  returnField: {
                    prop: "orderCode",
                    label: "投诉单号"
                  },
                  api: vehiclePdiPriceInquirys.findccCode
                },
                span: 6
              }
            ],
      // 动态组件-查询条件
      tableComponents1:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents1
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
              .formComponents1
          : [
              {
                compKey: "compKey1",
                labelName: "VIN码：",
                codeField: "vin",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isRequire: true,
                isMust: true
              },
              {
                compKey: "compKey3",
                labelName: "车型：",
                codeField: "carConfigCn",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                disabled: true
              },
              {
                compKey: "compKey2",
                labelName: "车系：",
                codeField: "carConfigCode",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                disabled: true
              },
              {
                compKey: "compKey4",
                labelName: "车型名称：",
                codeField: "carSeriesCn",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                disabled: true
              },
              {
                compKey: "compKey4",
                labelName: "生产日期：",
                codeField: "produceDate",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                disabled: true
              },
              {
                compKey: "compKey4",
                labelName: "销售日期：",
                codeField: "saleDate",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true,
                disabled: true
              }
            ],

      tableComponents2:
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents2
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
              .formComponents2
          : [
              {
                compKey: "compKey1",
                labelName: "积分：",
                codeField: "integral",
                component: () => import("@/components/org/commonInput"),
                type: "inputText",
                isMust: true
              }
            ],

      // 表单数据（无需赋值，由混入对象赋值）
      formField: this.$utils.getFormField(
        this,
        {
          complainCode: "",
          dlrCode: "",
          dlrName: "",
          orderCode: ""
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),
      formField1: this.$utils.getFormField(
        this,
        {
          vin: "",
          carConfigCn: "",
          carConfigCode: "",
          carSeriesCn: "",
          produceDate: "",
          saleDate: ""
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      ),
      formField2: this.$utils.getFormField(
        this,
        {
          integral: "",
          orderId: "",
          dlrCustNo: ""
        },
        this.$ConfigCache.CacheConfig.cacheData[viewPageCode]
      )
    };
  },
  watch: {
    "formField.orderCode": {
      handler: function(Val) {
        if (Val) {
          this.queryCar();
        }
      }
    }
  },
  methods: {
    closeEdit() {
      this.$emit("close");
      this.$emit("update:curPopupsVisible", false);
      this.formField.dlrCode = "";
      this.formField.dlrName = "";
      this.formField1.vin = "";
      this.formField1.carConfigCn = "";
      this.formField1.carConfigCode = "";
      this.formField1.carSeriesCn = "";
      this.formField1.produceDate = "";
      this.formField1.saleDate = "";
    },
    open() {},
    queryCar() {
      const info = {};
      info.orderCode = this.formField.orderCode;
      request({
        url: "/mp/e3sh/aftersale/ClaimInGoodFaithService/findCustDetail.do",
        method: "post",
        data: info
      }).then(res => {
        this.formField.dlrCode = res.rows[0].dlrCode;
        this.formField.dlrName = res.rows[0].dlrName;
        this.formField1.vin = res.rows[0].vin;
        this.formField1.carConfigCn = res.rows[0].carDetailByVin.carConfigCn;
        this.formField1.carConfigCode =
          res.rows[0].carDetailByVin.carConfigCode;
        this.formField1.carSeriesCn = res.rows[0].carDetailByVin.carSeriesCn;
        this.formField1.produceDate = res.rows[0].carDetailByVin.produceDate;
        this.formField1.saleDate = res.rows[0].carDetailByVin.saleDate;
        this.formField2.orderId = res.rows[0].orderId;
        this.formField2.dlrCustNo = res.rows[0].dlrCustNo;
      });
    },
    save() {
      request({
        url: "/mp/e3sh/aftersale/ClaimInGoodFaithService/addFaithClaim.do",
        method: "post",
        data: {
          orderId: this.formField2.orderId,
          orderCode: this.formField.orderCode,
          dlrCode: this.formField.dlrCode,
          vin: this.formField1.vin,
          integral: this.formField2.integral,
          dlrCustNo: this.formField2.dlrCustNo
        }
      }).then(res => {
        if (res.result === "1") {
          this.$message({
            message: "保存成功",
            type: "success",
            duration: 2000
          });
          this.curPopupsVisible = false;
          this.$emit("close");
        } else {
          // 保存失败
          this.$message({
            message: "保存失败:" + response.msg,
            type: "warn",
            uration: 2000
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.promptSpan {
  position: absolute;
  bottom: 26px;
  right: 335px;
  color: #e70020;
}
.filter-title {
  font-size: 18px;
  font-weight: bolder;
}
.filter-container.filter-title::before {
  border-left: 4px solid #0075ff;
  padding-right: 10px;
  height: 20px;
  left: 0px;
  top: 4px;
}
</style>

